<template>
  <div class="avatar-container">
    <div class="left">
      <vue-cropper
        ref="cropper"
        :aspect-ratio="1"
        :src="cropImgSrc"
        :ready="cropImage"
        :zoom="cropImage"
        :cropmove="cropImage"
        style="width:320px;height:320px;border: 1px dashed #d9d9d9;"
        preview=".preview"
      />
      <div class="common-tips">支持jpg,jpeg,png格式,大小不超过10MB</div>
      <el-upload
        :show-file-list="false"
        :auto-upload="false"
        :on-change="handleUploadChange"
        :multiple="false"
        accept="image/png,image/jpeg,image/jpg"
        action=""
        class="avatar-uploader">
        <el-button type="text"><i class="el-icon-picture-outline" />重新选择头像</el-button>
      </el-upload>
      <el-button type="primary" style="width:100%;margin-top:10px" @click="updateData">确定修改</el-button>

    </div>
    <div class="right">
      <div class="preview" />
      <div class="common-tips ">150 * 150 像素</div>
    </div>
  </div>
</template>
<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
  components: { VueCropper },
  data() {
    return {
      cropImgSrc: '',
      cropImgResult: '',
      sizeLimit: 10
    }
  },
  created() {
    this.cropImgSrc = this.common.getFileView(this.userInfo.avatar)
    this.$refs.cropper && this.$refs.cropper.replace(this.common.getFileView(this.userInfo.avatar))
  },
  methods: {
    // 实时预览函数
    realTime(data) {
      console.log(data)
    },
    imgLoad(msg) {
      console.log(msg)
    },
    cropImage() {
      this.cropImgResult = this.$refs.cropper.getCroppedCanvas().toDataURL()
    },
    cropMoving(data) {
      console.log(data, '截图框当前坐标')
    },
    // 选择文件
    handleUploadChange(file) {
      console.log(file)
      if (!'jpg,jpeg,png'.includes(file.name.substring(file.name.lastIndexOf('.') + 1))) {
        this.$modal.msgWarning('请选择指定格式图片文件!')
        return
      }
      const isLt = file.size / 1024 / 1024 < this.sizeLimit
      if (!isLt) {
        this.$modal.msgWarning('文件大小不能超过 ' + this.sizeLimit + 'MB!')
        return
      }
      const reader = new FileReader()
      reader.onload = (event) => {
        this.cropImgSrc = event.target.result
        this.$refs.cropper && this.$refs.cropper.replace(event.target.result)
      }
      reader.readAsDataURL(file.raw)
    },
    async updateData() {
      if (!this.cropImgResult) {
        this.$modal.msgWarning('请选择头像')
        return
      }
      try {
        var res = await this.$store.dispatch('base64Upload', { fileName: this.userInfo.username, base64: this.cropImgResult, catalogId: this.constants.FILE_CATALOG_USER_AVATAR })
        var token = await this.$store.dispatch('modifyAvatar', res.uuid)
        this.$modal.msgSuccess('设置成功!')
        await this.$store.dispatch('resetToken', token)
        this.$emit('success')
      } catch (err) {
        this.$modal.msgWarning('头像设置失败!')
      }
    }
  }
}
</script>
<style scoped lang="scss">
.avatar-container{
  display: flex;
  flex-direction: row;
  .left{
    width: 320px;
    margin-right: 20px;
    .common-tips{
      margin: 10px 0;
    }
    .avatar-uploader{
      text-align: center;
      .el-button{
        font-size: 14px;
        i{
          margin-right: 8px;
          font-size: 16px;
        }
      }

    }
  }
  .right{
    width: 200px;
    .common-tips{
      margin-top: 10px;
    }
    .preview{
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 150px;
      height: 150px;
      overflow: hidden;
      border-radius: 4px;
    }
  }
}
</style>
